<!--  -->
<template>
  <div class="history">
    <div class="tag clear">
      <span
        class="item fl"
        :class="{ cur: type == '101' }"
        @click="type = '101'"
        >预警</span
      >
      <span
        class="item fl"
        :class="{ cur: type == 'techindex' }"
        @click="type = 'techindex'"
        >指标</span
      >
      <span
        class="item fl"
        :class="{ cur: type == 'shape' }"
        @click="type = 'shape'"
        >形态</span
      >
      <span class="refresh fr" @click="refresh"></span>
    </div>
    <div class="noMore" v-if="dataList[type].length == 0">
      <img :src="PIC_URL + '/tlbypcWeb/optional/wushuju.png'" alt="" />
    </div>
    <template v-else>
      <div class="early" v-if="type == '101'">
        <div class="b_v">
          <div class="item" v-for="item in dataList[type]" :key="item.id">
            <p>
              <span class="time">{{ item.updateTime }} </span>
              <span class="stockCode">{{ item.stockCode }}</span>
              <span class="stockName">{{ item.stockName }} </span>
            </p>
            <p class="signal">
              <span>达到预警条件</span>
              <span class="blue">{{ item.content }} </span>
            </p>
          </div>
        </div>
      </div>
      <div class="list" v-if="type != '101'">
        <div class="item" v-for="item in dataList[type]" :key="item.id">
          <span class="time">{{ item.updateTime }} {{ item.minuteType }}</span>
          <span class="stockCode">{{ item.stockCode }}</span>
          <span class="stockName">{{ item.stockName }}</span>
          <span>发出</span>
          <span class="blue">{{ item.signal }}</span>
          <span :class="item.color" v-show="item.statusTxt">{{
            item.statusTxt
          }}</span>
          <span>信号</span>
        </div>
      </div>
    </template>
    <div class="loadMore" @click="loadMore" v-show="moreShow">更多></div>
  </div>
</template>
<script>
import { getHistoryList, getFeeds } from "../api/index";
import dayjs from "dayjs";
export default {
  data() {
    return {
      // 预警:101  指标 techindex  形态 shape
      userId: "",
      tags: ["101", "shape", "techindex"],
      type: "101",
      limit: 50,
      params2: {
        pageNum: 1,
        pageSize: 20,
      },
      page: 1,
      total: 0,
      dataList: {
        101: [],
        shape: [],
        techindex: [],
      },
    };
  },

  components: {},
  watch: {
    type(type) {
      this.dataList = {
        101: [],
        shape: [],
        techindex: [],
      };
      this.page = 1;
      this.params2.pageNum = 1;
      if (type == "101") {
        this.getHistoryList();
      } else {
        this.getFeeds();
      }
    },
  },
  computed: {
    moreShow() {
      if (this.type == "101") {
        return this.dataList[this.type].length == this.page * this.limit;
      } else {
        const total = this.params2.pageNum * this.params2.pageSize;
        return this.dataList[this.type].length == total;
      }
    },
  },
  //   beforeRouteEnter(to, from, next) {
  //     next((vm) => {});
  //   },
  mounted() {
    const { userId, type } = this.$route.params;
    this.userId = userId;
    if (type == "101") {
      this.getHistoryList();
    } else {
      this.type = type;
    }
  },

  methods: {
    refresh() {
      location.reload();
    },
    loadMore() {
      if (this.type == "101") {
        this.page++;
        this.getHistoryList();
      } else {
        this.params2.pageNum++;
        this.getFeeds();
      }
    },
    async getHistoryList() {
      await getHistoryList({
        userId: this.userId,
        alertDataType: this.type,
        limit: this.page * this.limit,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          const arr = data.map((item) => {
            const signal = item.pushContent.split(" ");
            item.content = signal[signal.length - 1];
            return item;
          });
          this.dataList[this.type] = arr;
        }
      });
    },
    async getFeeds() {
      const { userId } = this.$route.params;
      await getFeeds({
        userId,
        feedType: this.type,
        ...this.params2,
      }).then((back) => {
        if (back.status == 1) {
          let dataList = back.data.dataList;
          const arr = dataList.map((item) => {
            item.updateTime = String(item.tradeDate).replace(
              /^(\d{4})(\d{2})(\d{2})/,
              "$1-$2-$3"
            );
            item.statusTxt = ["", "看多", "看空"][item.tradeType];
            item.signal = item.signalTitle;
            if (item.minuteType) {
              item.minuteType = String(item.minuteType).replace(
                /(\d{2})(\d{2})/,
                "$1:$2"
              );
            } else {
              item.minuteType = "";
            }
            item.color = {
              green: item.tradeType == 2,
              red: item.tradeType == 1,
            };
            return item;
          });
          this.dataList[this.type] = this.dataList[this.type].concat(arr);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.history {
  padding-top: 32px;
  .tag {
    background: #27282e;
    line-height: 32px;
    border: 1px solid #000000;
    padding-right: 10px;
    position: fixed;
    top: 41px;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
    .item {
      background: #27282e;
      border-right: 1px solid #090910;
      width: 82px;
      text-align: center;
      font-size: 16px;
      color: #bcbfc4;
      cursor: pointer;
      &.cur {
        background: #35497c;
        color: #fff;
      }
    }
    .refresh {
      width: 18px;
      height: 18px;
      background: url($PIC_URL + "/tlbypcWeb/optional/refresh_sel.png")
        no-repeat left;
      cursor: pointer;
      position: relative;
      top: 6.5px;
      &:hover {
        background-position: -18px 0;
      }
    }
  }
  .early {
    padding: 9px 13px;
    .b_v {
      border-left: 1px solid #1d202c;
      padding: 5px 7px;
      .item {
        border: 1px solid #1d202c;
        position: relative;
        padding: 10px 9px;
        font-size: 15px;
        margin-bottom: 7px;
        color: #cccccc;
        line-height: 20px;
        span {
          margin-right: 10px;
        }
        .stockCode,
        .stockName {
          color: #f4f636;
        }
        .blue {
          color: #02e2f4;
        }
        .signal {
          padding-top: 10px;
        }
        &::before {
          content: "";
          display: block;
          position: absolute;
          width: 7px;
          height: 7px;
          background: #1d202c;
          border-radius: 50%;
          top: -7px;
          left: -12px;
        }
      }
    }
  }
  .list {
    padding: 0 10px 16px;
    .item {
      line-height: 26px;
      position: relative;
      font-size: 15px;
      color: #999999;
      span {
        margin-right: 8px;
      }
      .stockCode,
      .stockName {
        color: #f4f636;
      }
      .blue {
        color: #02e2f4;
      }
      .green {
        color: #31ed24;
      }
      .red {
        color: #ea2827;
      }
    }
  }
  .loadMore {
    background: #13151e;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #bcbfc4;
    cursor: pointer;
  }
  .noMore {
    img {
      display: block;
      margin: 0 auto;
    }
  }
}
</style>
